<template>
  <div class="box">
    <header>
      <div class="sousuo">
        <span>
          <i class="iconfont icon-sousuo"></i>
        </span>
      </div>
      <ul>
        <li>关注</li>
        <li>推荐</li>
        <li>T热门</li>
        <li>Wow 圈</li>
      </ul>
    </header>
    <main>
      <!-- 形成滚动区域 -->
      <section>
        <div class="dazao">
          <div class="bang">
            <div class="bangleft">排行榜</div>
            <div class="bangright">热门活动</div>
          </div>
          <figure>
            <img src="../assets/img/remen1.png" alt="" />
          </figure>
          <figure>
            <img src="../assets/img/remen2.png" alt="" />
          </figure>
        </div>
      </section>
    </main>
    <footer>
      <div>
        <i class="iconfont icon-cidianku"></i>
        词典
      </div>
      <div>
        <i class="iconfont icon-shipin"></i>
        视频
      </div>
      <div>
        <i class="iconfont icon-xuexi"></i>
        学习
      </div>
      <div>
        <i class="iconfont icon-shuyi_wenbenfanyi"></i>
        翻译
      </div>
      <div>
        <i class="iconfont icon-huiyuan"></i>
        会员
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
};
</script>

<style scoped>


.box{
  width: 375px;
  height: 100%;
  margin: 0 auto;
}
.header{
    position: fixed;
  top:0;
  left:0;
}
header{
    height: 1.1rem;   
    padding:0 .16rem;
    margin-top: 0.2rem;

    justify-content: space-between;
    align-items: center;
}

header .sousuo{
    /* width: 3.35rem; */
    height: .37rem;
    background: #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .12rem;
    padding: 0 .1rem;
    margin: 0.1rem auto;
    color: #c8c8c8;
    border-radius: 10px;
}

header ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.22rem;    
    width: 3.35rem;
    margin:  .17rem  0;
    color: #c8c8c8;
    padding-left:0.05rem ;
}
header ul li{
   margin-right:0.23rem;
  
}
header ul li:hover{
    font-weight: bold;
   color: #000;

}
header  .bang{
    display: flex;
    justify-content: space-between;
}

/* ------------------------------- */
main{
    flex: 1;
    overflow: auto;
    /* background: hotpink; */
}


.dazao{
    /* height: 1.3rem; */
    width: 100%;
    display: flex;  
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 auto;
    border-radius: 9px;
   
}
.dazao .bang{
    display: flex;
    align-items: left;
    justify-content: space-between;
    font-size: 0.12rem;
    width:3.35rem ;
    height:0.4rem ;
    margin: 0.1rem auto;
}
.dazao .bang div{
    width:1.6rem ;
    height:0.4rem ;
    border: 1px solid #f2f2f4;
    border-radius: 0.2rem;
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.14rem;
    background-color: #f2f2f4;
}
.dazao .bang div:hover{
    color: red;
    background-color: #fde5e1;
}
.dazao figure{
    display: flex;
    flex-direction: column;
    align-items: left;
}
.dazao figure  img{
    width:3.4rem ;
    height:2.8rem ;
    margin-top: 0.07rem;
    margin-bottom: 0.2rem;
}



/* 底部 */
footer{
    height: .6rem;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .24rem;
}
footer div{
    font-size: .12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
</style>
